<!-- home -->
<template>
  <page-view>
    <top-bar title="收付款设置"
             :bg="true">
      <div>
        <van-icon name="plus"
                  @click="showPopup"
                  color="#585DF9"
                  size="26px" />
      </div>
    </top-bar>
    <page-content class="product">
      <div class="pay-container">
        <div class="y-box">
          <div class="y-type">
            <div class="y-xch" :class="{'y-y': item.currency == 0}" v-for="(item, index) in list" :key="index">
              <span class="y-bs">{{item.currency == 0 ? 'BZZ' : 'XCH'}}</span>
              <div class="y-dz">
                <p class="y-d">{{item.currency == 0 ? 'BZZ' : 'XCH'}}地址</p>
                <p class="y-z">{{item.account_no}}</p>
                <img v-if="item.currency == 0" src="../../assets/image/mine/m_money.png"
                     alt=""
                     class="m-left">
                <img v-if="item.currency == 1" src="../../assets/image/mine/m_left.png"
                     alt=""
                     class="m-left">
              </div>
            </div>
          </div>
        </div>
        <van-action-sheet v-model="show"
                          title="添加收款方式">
          <div class="content">
            <div class="y-con"
                 @click="goBind('1')">XCH地址</div>
            <div class="y-con"
                 @click="goBind('0')">BZZ地址</div>
          </div>
        </van-action-sheet>
      </div>
    </page-content>
  </page-view>
</template>

<script>
import Vue from 'vue';
import { ActionSheet } from 'vant';

Vue.use(ActionSheet);
import TopBar from '@/components/TopBar';
import PageView from '@/components/PageView';
import PageContent from '@/components/PageContent';
import service from '@/utils/request';

export default {
  components: {
    TopBar,
    PageView,
    PageContent
  },
  data () {
    return {
      list: [],
      show: false,
    }
  },

  mounted () { },

  mounted () {
    this.getData();
  },

  methods: {
    showPopup () {
      this.show = true;
    },
    goBind (id) {
      this.$router.push({ path: `/bind/${id}` })
    },
    getData () {
      return service.post('/apiGetAccount.do', null).then(res => {
        this.list = res.data;
      })
    },
  }
}
</script>
<style lang="scss" scoped>
.y-add {
  width: 26px;
  height: 26px;
}
.content {
  padding: 16px 16px 10px;
  .y-con {
    height: 50px;
    line-height: 50px;
    border-top: 1px solid #eee;
    font-size: 13px;
    color: #3d3e54;
  }
}
.pay-container {
  // min-height: 100vh;
  width: 100vw;
  // background: #f2f1f8;
  overflow: hidden;
  .y-box {
    padding: 0 20px;
    height: auto;
    // margin-top: 39px;
    .y-header {
      height: 29px;
      width: 100%;
      display: flex;
      justify-content: space-between;
      .y-arrow {
        width: 22px;
        height: 22px;
      }
      .y-title {
        font-size: 21px;
        font-weight: 500;
        color: #000000;
        line-height: 29px;
      }
    }
    .y-type {
      height: auto;
      margin-top: 8px;
      .y-xch {
        height: 85px;
        background: linear-gradient(141deg, #5885f9 0%, #585df9 100%);
        border-radius: 8px;
        padding: 25px 9px;
        box-sizing: border-box;
        position: relative;
        margin-bottom: 8px;
        .y-bs {
          display: inline-block;
          width: 32px;
          height: 19px;
          line-height: 19px;
          background: rgba(255, 255, 255, 0.7);
          border-radius: 5px;
          text-align: center;
          vertical-align: top;
        }
        .y-dz {
          display: inline-block;
          height: 37px;
          width: auto;
          vertical-align: top;
          margin-left: 10px;
          .y-d {
            height: 18px;
            font-size: 13px;
            font-weight: 500;
            color: #ffffff;
            line-height: 18px;
          }
          .y-z {
            height: 18px;
            font-size: 13px;
            font-weight: 400;
            color: #ffffff;
            line-height: 18px;
          }
        }
        .m-left {
          position: absolute;
          height: 37px;
          right: 10px;
          top: 25px;
        }
      }
    }
  }
  .y-y {
    background: linear-gradient(141deg, #f9d558 0%, #f9ca58 100%) !important;
  }
  #m-money {
    width: 50px;
    height: 51px;
  }
}
</style>
